<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>注册登录页面</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .header{
            margin-left: 31.5rem;
            margin-top: 35.5rem;
            display: flex;
            align-items: center;
            position: relative;
        }
        .header img{
            width: 71rem;
            height: 72rem;
        }
        .header-title{
            margin-left: 20.5rem;
            font-size: 15rem;
            font-weight: bold;
            margin-top: -15rem;
        }
        #docpicker{
            width: 100rem;
            height: 100rem;
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 0;
            outline: none;
            filter: alpha(opacity=0);
            opacity: 0;
        }
        .tel{
            border-bottom: 2px solid rgb(205, 205, 205);
            padding-bottom: 14.5rem;
            margin-left: 31.5rem;
            margin-right: 31.5rem;
            margin-top: 25.5rem;
        }
        .tel input{
            font-size: 12rem;
            border: none;
            outline:none;
        }
        #code{
            display: none;
        }
        .clearfloat:after{
            display:block;
            clear:both;
            content:"";
            visibility:
            hidden;height:0
        }
        .clearfloat{
            zoom:1
        }
        #btnSendCode1{
            float: right;
            color: rgb(205, 205, 205);
            margin-top: 17.5rem;
            margin-right: 31.5rem;
            border: none;
            background: none;
            outline: none;
        }
        .wechat{
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-bottom: 73rem;
            margin-left: -17.25rem;
        }
        .wechat img{
            width: 35.5rem;
            height: 31rem;
        }
        .notice{
            width: 278rem;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -139rem;
            margin-bottom: 28.5rem;
            text-align: center;
            color: #ADADAD;
            font-size: 10.5rem;
        }
    </style>
    <script>
        !function(n){
            var  e=n.document,
            t=e.documentElement,
            i=37500,
            d=i/100,
            o="orientationchange"in n?"orientationchange":"resize",
            a=function(){
                var n=t.clientWidth||320;n>720&&(n=720);
                t.style.fontSize=n/d+"px"
            };
            e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
        }(window);
    </script>
</head>
<body>
    <div class="header">
        <img src="__CDN__/assets/images/头像.png" id="show">
        <input type="file" id="docpicker" accept="image/*"  onchange="changepic(this)">
        <div class="header-title">登录</div>
    </div>
    <div class="tel">
        <input type="number" placeholder='输入手机号' id="phone1">
        <input type="number" placeholder='输入验证码' id="code">
    </div>
    <div class="clearfloat">
        <input id="btnSendCode1" type="button" class="btn btn-default" value="获取验证码" onClick="sendMessage1()" />
    </div>
    
    <div class="wechat"><img src="__CDN__/assets/images/微信.png"></div>
    <div class="notice">登录即代表您已经阅读并同意《软件许可协议》和《用户隐私协议》</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    function changepic() {
        var reads= new FileReader();
        f=document.getElementById('docpicker').files[0];
        reads.readAsDataURL(f);
        reads.onload=function (e) {
            document.getElementById('show').src=this.result;
        };
    }
    var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;//手机号正则 
    var count = 60; //间隔函数，1秒执行
    var InterValObj1; //timer变量，控制时间
    var curCount1;//当前剩余秒数
    /*第一*/
    function sendMessage1() {
        curCount1 = count;		 		 
        var phone = $.trim($('#phone1').val());
        if (!phoneReg.test(phone)) {
            alert(" 请输入有效的手机号码"); 
            return false;
        }
        //向后台发送处理数据
        $.ajax({
            //请求方式
            type : "GET",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "http://app.aebrowser.cn/api/sms/send",
            dataType: 'jsonp',
            //数据，json字符串
            data : {
                mobile:$("#phone1").val(),
                event:'mobilelogin'
            },
            //请求成功
            success : function(res) {
                if(res.code==1){
                     //设置button效果，开始计时
                    $("#btnSendCode1").attr("disabled", "true");
                    // $("#btnSendCode1").val( + curCount1 + "秒再获取");
                    InterValObj1 = window.setInterval(SetRemainTime1, 1000); //启动计时器，1秒执行一次
                }
            }
        });
    }
    function SetRemainTime1() {
        if (curCount1 == 0) {     
            $('#phone1').show();
            $('#code').hide();        
            window.clearInterval(InterValObj1);//停止计时器
            $("#btnSendCode1").removeAttr("disabled");//启用按钮
            $("#btnSendCode1").val("重新发送");
        }
        else {
            $('#phone1').hide();
            $('#code').show();
            curCount1--;
            $("#btnSendCode1").val("重新获取("+curCount1+")");
        }
    }
    $("#code").bind("input propertychange",function(event){
        if($("#code").val().length==4){
            $.ajax({
                //请求方式
                type : "GET",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "http://app.aebrowser.cn/api/user/mobilelogin",
                dataType: 'jsonp',
                //数据，json字符串
                data : {
                    mobile:$("#phone1").val(),
                    captcha:$("#code").val()
                },
                //请求成功
                success : function(res) {
                    if(res.code==1){
                        localStorage.setItem("token", res.data.userinfo.token);
                        window.location.href="./快捷页.html";
                    }
                }
            });
        }
    });

</script>
</html>